<template>
  <div class="login-box" v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(100, 100, 100, 0.8)">
    <div class="login">
        <img src="../assets/img/loginicon.png" alt="">
      <!-- <h3 class="mlcfont">欢迎登录</h3> -->
      <el-input placeholder="请输入用户名" v-model="username" clearable type="text" class="username"></el-input>
      <el-input placeholder="请输入密码" v-model="password" clearable type="password" class="password"></el-input>
      <el-button class="login-btn" :plain="true" @click="sign">{{signName}}</el-button>
      <!-- <input placeholder="请输入用户名" v-model="username" type="text" class="username">
      <input placeholder="请输入密码" v-model="password" type="password" class="password">
      <button class="login-btn" @click="sign">{{signName}}</button> -->
    </div>
      
  </div>
</template>

<script>
export default {
  name: 'login',
  data() {
      return {
          loading:false,
          signName : '登录',
          username:'',
          password:''
      }
  },
  methods: {
      sign:function() {
          let _this = this;
          if(!!this.username && !!this.password){
            this.loading = true;
            let username_pwd = JSON.stringify(this.encrypt(JSON.stringify({"username":this.username,"password":this.password})));
            console.log(username_pwd)
            let _this = this;
            this.axios.post(this.$root.domainIp+'1.0/msys/login', {
                param: username_pwd
            })
            .then(function (response) {
                if(response.data.code == 0){
                    _this.loading = false;
                    localStorage.setItem('loginInfo',_this.decrypt(response.data.data));
                    // 路由跳转
                    _this.$router.push({
                        path:'/inspection'
                    })
                }else{
                    _this.loading = false;
                    _this.$message({
                        message:(response.data.message || '请检查网络是否连接'),
                        center: true
                    });
                }
            })
            .catch(function (error) {
                _this.loading = false;
                console.log(error);
            });
          }else{
            this.$message({
                message:'用户名和密码不能为空',
                center: true
            });
            return;
          }
      }
  }
}
</script>

<style scoped>
.login-box{
    height: 100%;;
}
.login{
  text-align: center;
  color: #2c3e50;
  width: 80%;
  padding-left: 10%;
  padding-top: 2rem;
  height: 100%;
}
h3{
    font-size: 0.42rem;
    padding-bottom: 0.6rem;
}
.username,.password{
    margin-bottom: 0.6rem;
    width: 100%;
    height: 0.6rem;
    border: 0.02rem solid #E6E6E6;
    border-radius: 0.01rem;
    background: #E6E6E6;
}
.login-btn{
    width: 100%;
    background: #ff5000;
    color: #ffffff;
    height: 0.8rem;
    border: 0.02rem solid transparent;
    border-radius: 0.08rem;
}
img{
    width: 2rem;
    margin-bottom: 1.2rem;
}
</style>
